<!DOCTYPE html>
<html lang="en">
        <head>
                <meta charset="utf-8">

                <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
                Remove this if you use the .htaccess -->
                <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

                <title>Order Chronological History: Israel's Timeline</title>
                <meta name="description" content="">
                <meta name="author" content="nnimova">

                <meta name="viewport" content="width=device-width; initial-scale=1.0">

                <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
                <link rel="shortcut icon" href="/favicon.ico">
                <link rel="apple-touch-icon" href="/apple-touch-icon.png">
               
                <!--<link rel="stylesheet" href="http://yui.yahooapis.com/3.9.0/build/cssgrids/cssgrids-min.css">-->
                <style type="text/css" media="screen">
                    .yui3-dd-proxy {
                        text-align: left;
                    }
                    #play {
                        border: 1px solid black;
                        padding: 10px;
                        margin: 10px;
                        zoom: 1;
                    }
                    #play:after { display: block; clear: both; visibility: hidden; content: '.'; height: 0;}
                    #play ul {
                        border: 1px solid black;
                        margin: 10px;
                        width: 200px;
                        height: 300px;
                        float: left;
                        padding: 0;
                        zoom: 1;
                        position: relative;
                    }
                    #play ul li {
                        background-image: none;
                        list-style-type: none;
                        padding-left: 20px;
                        padding: 5px;
                        margin: 2px;
                        cursor: move;
                        zoom: 1;
                        position: relative;
                    }
                    #play ul li.list1 {
                        background-color: #8DD5E7;
                        border:1px solid #004C6D;
                    }
                    #list1{
                        left: 550px;
                    }      
                    body{
                        text-align: center;
                    }
                </style>
                <script src="http://yui.yahooapis.com/3.13.0/build/yui/yui-min.js"></script>
                <script>
                        YUI().use('dd-constrain', 'dd-proxy', 'dd-drop', 'button', function(Y) {
                    //Listen for all drop:over events
                    Y.DD.DDM.on('drop:over', function(e) {
                        //Get a reference to our drag and drop nodes
                        var drag = e.drag.get('node'),
                            drop = e.drop.get('node');
                       
                        //Are we dropping on a li node?
                        if (drop.get('tagName').toLowerCase() === 'li') {
                            //Are we not going up?
                            if (!goingUp) {
                                drop = drop.get('nextSibling');
                            }
                            //Add the node to this list
                            e.drop.get('node').get('parentNode').insertBefore(drag, drop);
                            //Resize this nodes shim, so we can drop on it later.
                            e.drop.sizeShim();
                        }
                    });
                    //Listen for all drag:drag events
                    Y.DD.DDM.on('drag:drag', function(e) {
                        //Get the last y point
                        var y = e.target.lastXY[1];
                        //is it greater than the lastY var?
                        if (y < lastY) {
                            //We are going up
                            goingUp = true;
                        } else {
                            //We are going down.
                            goingUp = false;
                        }
                        //Cache for next check
                        lastY = y;
                    });
                    //Listen for all drag:start events
                    Y.DD.DDM.on('drag:start', function(e) {
                        //Get our drag object
                        var drag = e.target;
                        //Set some styles here
                        drag.get('node').setStyle('opacity', '.25');
                        drag.get('dragNode').set('innerHTML', drag.get('node').get('innerHTML'));
                        drag.get('dragNode').setStyles({
                            opacity: '.5',
                            borderColor: drag.get('node').getStyle('borderColor'),
                            backgroundColor: drag.get('node').getStyle('backgroundColor')
                        });
                    });
                    //Listen for a drag:end events
                    Y.DD.DDM.on('drag:end', function(e) {
                        var drag = e.target;
                        //Put our styles back
                        drag.get('node').setStyles({
                            visibility: '',
                            opacity: '1'
                        });
                    });
                    //Listen for all drag:drophit events
                    Y.DD.DDM.on('drag:drophit', function(e) {
                        var drop = e.drop.get('node'),
                            drag = e.drag.get('node');
               
                        //if we are not on an li, we must have been dropped on a ul
                        if (drop.get('tagName').toLowerCase() !== 'li') {
                            if (!drop.contains(drag)) {
                                drop.appendChild(drag);
                            }
                        }
                    });
                   
                    //Static Vars
                    var goingUp = false, lastY = 0;
               
                    //Get the list of li's in the lists and make them draggable
                    var lis = Y.Node.all('#play ul li');
                    lis.each(function(v, k) {
                        var dd = new Y.DD.Drag({
                            node: v,
                            target: {
                                padding: '0 0 0 20'
                            }
                        }).plug(Y.Plugin.DDProxy, {
                            moveOnEnd: false
                        }).plug(Y.Plugin.DDConstrained, {
                            constrain2node: '#play ul'
                        });
                    });
               
                    //Create simple targets for the 2 lists.
                    var uls = Y.Node.all('#play ul');
                    uls.each(function(v, k) {
                        var tar = new Y.DD.Drop({
                            node: v
                        });
                    });
                   
                    var button = new Y.Button({
                        srcNode:'#check',
                        on: {
                            'click': function(){
                                var lis1 = document.getElementById("list1").getElementsByTagName("li");
                                var flag = true;
                               
                                for(var i=0;i<lis1.length;i++){
                                        if(lis1[i].getAttribute('data') == "d" + (i+1))
                                                continue;
                                        else{
                                                flag = false;
                                                break;
                                        }
                                }
                               
                                if(flag){
                                        document.getElementById("resultLBL").textContent = "Correct!";
                                        document.getElementById("resultLBL").style.color= "green";
                                }
                                else{
                                        document.getElementById("resultLBL").textContent = "Try Again";
                                        document.getElementById("resultLBL").style.color= "red";
                                }
                            }
                        }
                    }).render();
                });
                </script>
        </head>

        <body>
                <div>
                        <header>
                                <h1>Order Chronological History: Israel's Timeline</h1>
                        </header>
                        <nav>
                                <p>
                                        <div id="play">
                                            <ul id="list1">
                                                <li class="list1" data="d4">Oslo Accords were signed</li>
                                                <li class="list1" data="d1">Yasser Arafat forms Fatah</li>
                                                <li class="list1" data="d5">Moshe Katsav was convicted of rape</li>
                                                <li class="list1" data="d3">Lod Airport Massacre</li>
                                                <li class="list1" data="d2">INS Dakar sunk</li>
                                            </ul>
                                        </div>
                                </p>
                                <button id="check">check</button>              
                                <p>
                                        <label id="resultLBL"></label>
                                </p>
                        </nav>

                        <div>

                        </div>

                        <footer>
                                <p>
                                        &copy; Copyright  by nnimova
                                </p>
                        </footer>
                </div>
        </body>
</html>

